<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>
<html>
<head>
    <title>Title</title>
    <style>
        .hide {
            pointer-events: none;
            color: gray;
        }
    </style>
    <script src="../js/jquery-3.6.3.min.js.txt"></script>
</head>
<body>
<div>
    <form action="page" id="searchForm">
        <input type="hidden" name="page" id="pageNo" value="1">
        <input name="sname" value="${sname}" placeholder="姓名"/>
        <input name="phone" value="${phone}" placeholder="手机号"/>
        加入时间从<input type="date" name="start" value='<fmt:formatDate value="${start}" pattern="yyyy-MM-dd" />' />-
           <input type="date" name="end" value='<fmt:formatDate value="${end}" pattern="yyyy-MM-dd" />'/>
        <input type="submit" value="搜索">
    </form>
    <a href="addStudent.jsp">添加新成绩</a>
</div>
<table border="1" width="100%" cellpadding="0" cellspacing="0">
    <tr>
        <th>编号</th>
        <th>姓名</th>
        <th>学校</th>
        <th>专业</th>
        <th>学业等级</th>
        <th>在读状态</th>
        <th>注册时间</th>
        <th>微信</th>
        <th>手机号码</th>
        <th>性别</th>
        <th>操作</th>
    </tr>
    <c:forEach items="${p.data}" var="user">
        <tr>
            <td>${user.id}
            </td>
            <td>${user.sname}
            </td>
            <td>${user.school}
            </td>
            <td>${user.major}
            </td>
            <td>${user.type}
            </td>
            <td>${user.isgraduate}
            </td>
            <td><fmt:formatDate value="${user.addtime}" pattern="yyyy年MM月dd日"/></td>
            <td>${user.openid}
            </td>
            <td>${user.phone}
            </td>
            <td>${user.sex}
            </td>
            <td>
                <a onclick="return confirm('真的要删除?')" href="del-${user.id}">删除</a>
                <a  href="toUpdate-${user.id}">修改</a>
            </td>
        </tr>
    </c:forEach>
</table>
<p id="pager">
    <a href="#" data-page="1">首页</a>
    <a href="#" data-page="${p.pageNo-1}" <c:if test="${p.pageNo<=1}"> class='hide' </c:if> >上一页</a>
    <span><input type="number" min="1" id="goto" value="${p.pageNo}" max="${p.pageTotal}" style="width: 48px"/><input
            type="button" id="go" value="Go"/>/${p.pageTotal}</span>
    <a href="#" <c:if test="${p.pageNo>=p.pageTotal}"> class='hide'</c:if> data-page="${p.pageNo+1}">下一页</a>
    <a href="#" data-page="${p.pageTotal}">尾页</a>
</p>

<script>
    $(function () {
        $("#go").click(function () {
            let pageNo = $(this).prev().val();
            $("form#searchForm #pageNo").val(pageNo);
            $("form#searchForm").submit();
            return false;
        });
        $("#goto").keyup(function (event) {
            if (event.keyCode == 13) {
                let pageNo = $(this).val();
                $("form#searchForm #pageNo").val(pageNo);
                $("form#searchForm").submit();
                return false;
            }
            return false;
        });
        $("#pager a").click(function () {
            let pageNo = $(this).attr("data-page");
            $("form#searchForm #pageNo").val(pageNo);
            $("form#searchForm").submit();
            return false;
        });
    });
</script>
</body>
</html>
